<template>
  <el-dialog
    :visible.sync="openProcessFollow"
    :fullscreen="true"
    :destroy-on-close="true"
    :show-close="false">
    <div style="
        border-bottom: 1px solid rgb(232,232,232);
        position: absolute;
        top: 0; left: 0;
        height: 70px; width: 100%;
        line-height: 70px; padding-left: 20px; padding-right: 20px;">
      <span style="font-weight: bold; font-size: 20px;">流程跟踪</span>

      <div style="float:right;">
        <el-button plain icon="el-icon-close" @click="openProcessFollow = false"></el-button>
      </div>
    </div>

    <el-row v-if="openProcessFollow" style="margin: 40px;">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-steps direction="vertical" :space="80" :active="processActive" finish-status="success" process-status="finish">
            <el-step
              :title="item.name"
              v-for="(item, index) in processComment"
              :key="index" @click.native="stepFold(item, index)">
              <template slot="description" >
                <div
                  v-for="(comment, index) in item.processCommentVOS"
                  :key="index"
                  style="width: 400px; height: 65px;background-color: rgb(245,247,250);padding: 10px; margin-bottom: 10px;"
                  v-show="!item.fold">
                  <div>
                    <div>
                      <span>办理人: {{ comment.user }}</span>
                      <span style="display: block; float:right;">{{ parseTime(comment.endTime) }}</span>
                    </div>
                    <div style="margin-top: 10px;">
                    <span style="display: block; margin-left: 20px;">
                      <span v-show="comment.handler !== null">
                        <i class="el-icon-s-check"></i>
                        {{ comment.handler }}
                        {{ comment.resolution === null ? ' : ' + comment.resolution : '' }}
                      </span>
                      <span v-show="comment.handler === null">
                        等待审核操作......
                      </span>
                    </span>
                    </div>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple-light">
          <Bpmn :processInstanceId="processInstanceId" :key="'bpmn' + key"></Bpmn>
        </div>
        <div style=" margin: 40px;">
          <el-table
            ref="multipleTable"
            :data="processNodeLog"
            border
            tooltip-effect="dark"
            style="width: 100%;">
            <el-table-column
              type="index"
              label="序号"
              width="55"
              align="center"
              sortable>
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="节点名称">
            </el-table-column>
            <el-table-column
              align="center"
              label="开始时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.startTime) }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="结束时间">
              <template slot-scope="scope">
                {{ parseTime(scope.row.endTime) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="spendTime"
              label="花费时间"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </el-col>

    </el-row>
  </el-dialog>
</template>

<script>

import {getProcessCommentLog, getProcessNodeLog} from "@/api/camunda/camunda";

import Bpmn from '@/components/Camunda/bpmn'

export default {
  name: "comment",
  components: {
    Bpmn,
  },
  data() {
    return {
      openProcessFollow: false,
      processComment: [],
      processNodeLog: [],
      processActive: 0,
      processInstanceId: null,
      key: null,
    }
  },
  methods: {
    init(processInstanceId){
      this.openProcessFollow = true
      getProcessCommentLog(processInstanceId)
        .then(({data}) => {
          this.processComment = data.activityLogs
          this.processActive = data.active
        }).catch(() => {
        this.openProcessFollow = false
      })

      this.processInstanceId = processInstanceId
      this.key = new Date().getTime()

      getProcessNodeLog(processInstanceId)
        .then(({data}) => {
          console.log(data)
          this.processNodeLog = data
        }).catch(() => {
        this.openProcessFollow = false
      })
    },
    stepFold(item, index){
      if(item.fold){
        item.fold = !item.fold
      } else {
        item.fold = true
      }
      this.$set(this.processComment, index, item)
    }
  }
}
</script>

<style>
.el-step.is-vertical .el-step__title:hover{
  cursor: pointer;
}
</style>
